<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-23 17:16
 * Desc: 复制路径组件 CopyUrl
 */
-->
<template>
  <view class="copy-url">
    <view class="mb25 b fc3 fs28">{{ title }}</view>
    <view class="copy-url__ipt">
      <view class="copy-url__ipt-block">
        <u-input v-model="text" :border="false" readonly />
      </view>
      <text class="copy-url__copy-btn" @click="copy">复制</text>
    </view>
  </view>
</template>
<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      }
    },
    name: 'CopyUrl',
    data() {
      return {}
    },
    computed: {
      text: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    },
    methods: {
      copy() {
        this.$auth.getShareCount().then(() => {
          uni.setClipboardData({
            data: this.text
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .copy-url {
    &__ipt {
      box-sizing: border-box;
      padding-left: 30upx;
      display: flex;
      align-items: center;
      overflow: hidden;
      width: 690upx;
      height: 88upx;
      background: #f3f5f7;
      border-radius: 10upx;
    }
    &__ipt-block {
      flex: 1;
      background: #f3f5f7;
    }
    &__copy-btn {
      display: inline-block;
      line-height: 88upx;
      padding: 0 37upx;
      font-size: 30upx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
    }
  }
</style>
